import React from 'react';
import styles from './slidePicture.css';
import 'react-photoswipe/lib/photoswipe.css';
// import {PhotoSwipe} from 'react-photoswipe';
import {PhotoSwipeGallery} from 'react-photoswipe';

class SlidePicture extends React.Component {

  state = {
    isOpen: false,
    galleryItems: [],
    options: {}
  };

  componentDidMount = () => {
    const { list,isHandlWorkEnks } = this.props;
    this.setImageData(list,isHandlWorkEnks);
  }

  componentWillReceiveProps(newProps){
    // console.log('newProps', JSON.stringify(newProps));
    const { list,isHandlWorkEnks } = newProps;
    this.setImageData(list,isHandlWorkEnks);
  }

  setImageData = (list,isHandlWorkEnks) =>{

    let { galleryItems } = this.state;
    galleryItems=[];
    if(list && !isHandlWorkEnks){
      // console.log('list', JSON.stringify(list));
      // console.log('isHandlWorkEnks',isHandlWorkEnks);
      if(list.length > 0){
        list.map((item, index) => {

          let galleryItemData = {
            src: item.url,
            thumbnail: item.url,
            w: item.width ? item.width : 1200,
            h: item.height ? item.height : 900,
            // title: `Image ${index}`
          }
          galleryItems.push(galleryItemData);
        })
      }
    }

    this.setState({
      galleryItems
    })
  }

  openPhotoSwipe = (e) => {
    e.preventDefault();
    this.setState({
      isOpen: true,
      // options: {
      //   closeOnScroll: false
      // }
    });
  };

  handleClose = () => {
    this.setState({
      isOpen: false
    });
  };

  getThumbnailContent = (item) => {
    // console.log('item', JSON.stringify(item));
    // console.log('item', 1234);
    return (
      <div className={styles.slidePicture}>
         <img src={item.thumbnail} width={120} height={90}/>
      </div>
    );
  };

  render(){

    // console.log('this.state.galleryItems', JSON.stringify(this.state.galleryItems));
    const galleryItemsLength = this.state.galleryItems.length;
    if(galleryItemsLength > 0){
      const withLength = 7.75 * galleryItemsLength;
      var widthStyle = document.getElementsByClassName('pswp-thumbnails');
      var fontSizeStyle = document.getElementsByClassName('pswp__counter');
      for(var i = 0; i < widthStyle.length; i++){
        widthStyle[i].style.width = `${withLength}em`;
      }
      for(var i = 0; i < fontSizeStyle.length; i++){
        fontSizeStyle[i].style.fontSize = '0.875em';
      }
    }

    const options = {
      index: 0, //开始幻灯片索引值
      escKey: false,
      captionEl: false,

      // ui option
      closeEl:false, //显示/关闭按钮
      timeToIdle: 4000,
      fullscreenEl:false, //全屏按钮
      tapToClose: true, //点击滑动区关闭
      shareEl:false,//显示/关闭菜单选项
      shareButtons:[ //菜单选项
        {id:'download', label:'download', url:'{{raw_image_url}}', download:true}
      ],
      addCaptionHTMLFn: function(item, captionEl, isFake) {
        console.log('点击列表图片');
        if(!item.title) {
            captionEl.children[0].innerHTML = '';
            return false;
        }
        captionEl.children[0].innerHTML = item.title;
        return true;
      }
    };

    return(
      <div className={styles.slidePictureBody}>

        {this.state.galleryItems.length > 0 ? (
          <PhotoSwipeGallery
            items={this.state.galleryItems}
            thumbnailContent={this.getThumbnailContent}
            options={options}
          />
        ):''}


      </div>
    )
  }

}

export default SlidePicture;
